<template>
  <div v-loading="loading" class="order_detail" element-loading-text="加载中...">
    <div class="header" v-if="orderDetail">
      <div class="order_detail_header_status">
        <div class="order_number_module">
          <span>{{ orderDetail.code }}</span
          >&nbsp;
          <span>{{ orderDetail.orderType }}</span>
        </div>
        <div class="status">
          <HStatus type="warning" v-if="orderDetail.status === 1">承接</HStatus>
          <HStatus type="warning" v-if="orderDetail.status === 2">发布</HStatus>
          <HStatus type="info" v-if="orderDetail.status === 3">取消</HStatus>
          <HStatus type="success" v-if="orderDetail.status === 4">确认完工</HStatus>
          <HStatus type="success" v-if="orderDetail.status === 5">网点完工</HStatus>
          <HStatus v-if="orderDetail.status === 6">已结算</HStatus>
          <HStatus type="warning" v-if="orderDetail.status === 7">登记</HStatus>
          <HStatus type="info" v-if="orderDetail.overinsured">{{
            orderDetail.overinsured ? '保外' : ''
          }}</HStatus>
          <HStatus v-if="orderDetail.overinsured == false"
            >在保{{ orderDetail.warrantyDay }}天</HStatus
          >
        </div>
      </div>
    </div>
    <div class="body" v-if="orderDetail">
      <div class="content_container">
        <div class="content">
          <div class="user_network_info">
            <div class="user_info">
              <user-info :order-detail="orderDetail" />
            </div>
            <div class="network_info">
              <network-info :order-detail="orderDetail" />
            </div>
          </div>
          <div class="order_info">
            <order-info :order-detail="orderDetail" />
          </div>
          <!--产品信息-->
          <commodity :order-id="orderDetail.id" />
        </div>
        <!-- <div class="expand_collapse" :style="{ transform: `translate(${isShowSideBar ? 100 : 0}%, 100%)` }">
          <el-tooltip content="收起" placement="left" v-if="isShowSideBar">
            <span class="show_btn_r" @click="isShowSideBar = false">
              <el-icon>
                <DArrowRight />
              </el-icon>
            </span>
          </el-tooltip>
          <el-tooltip content="展开" placement="left" v-else>
            <span class="show_btn_l" @click="isShowSideBar = true">
              <el-icon>
                <DArrowLeft />
              </el-icon>
            </span>
          </el-tooltip>
        </div> -->
      </div>
      <!-- <div class="sidebar" v-if="isShowSideBar && route.params.id">
        <operation-log ref="operationLogRef" :workId="route.params.id" />
      </div> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import { getHistoryDetail } from '@/api/order'
  import { ElMessage } from 'element-plus'
  import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
  import UserInfo from './components/user-info/UserInfo.vue'
  import NetworkInfo from './components/network-info/NetworkInfo.vue'
  import OrderInfo from './components/order-info/OrderInfo.vue'
  import OperationLog from '@/components/pages/order/detail/pages/body/side-bar/OperationLog.vue'
  import Commodity from './components/commodity/Commodity.vue'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.order.historyOrderDetail,
  })

  // 操作日志组件实例
  const operationLogRef = ref<InstanceType<typeof OperationLog> | null>(null)

  /**
   * 更新日志记录
   */
  const updateOperationLog = () => {
    // if (operationLogRef.value) {
    // operationLogRef.value.getList(1)
    // }
  }

  // 是否显示侧边栏
  const isShowSideBar = ref(true)

  const route = useRoute()
  const orderDetail = ref(null) //工单详情
  const showAddServiceFeeWidthSpare = ref(false) // 是否显示申请服务项目与工单物料
  const loading = ref(false)
  const workNo = ref('')
  const getOrderDetailData = async () => {
    showAddServiceFeeWidthSpare.value = false
    loading.value = true
    const res = await getHistoryDetail(route.params.id)
    loading.value = false
    if (res.data.success) {
      orderDetail.value = res.data.data.row
      workNo.value = res.data.data.row.orderNo
      showAddServiceFeeWidthSpare.value = orderDetail.value.status === 3
    } else {
      ElMessage({
        showClose: true,
        message: res.data.message,
        type: 'error',
        duration: 3000,
      })
    }
  }

  onMounted(() => {
    if (route.params.id) {
      getOrderDetailData()
      updateOperationLog()
    }
  })
</script>

<style lang="scss" scoped>
  @import './index';
</style>
